<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-03-28 18:22:15
 * @LastEditTime: 2024-03-28 19:17:57
-->
<script lang="ts" setup>
import { ref, reactive } from "vue";
defineProps({
  dialogVisible: {
    type: Boolean,
    required: true,
  },
  /**
   * 表单信息
   */
  detailsData: {
    type: Object,
    required: true,
  },
  /**
   * 宽度
   */
  width: {
    type: String || Number,
    default: 794,
  },
});
/**
 * 回调方法
 */
const emit = defineEmits<{
  (e: "handleClose"): void;
}>();
const handleClose = () => {
  emit("handleClose");
};
</script>
<template>
  <el-dialog
    :modelValue="dialogVisible"
    title="XX新增"
    append-to-body
    draggable
    :width="width"
    :before-close="handleClose"
    class="dialog-xs"
  >
    <div class="content">
      <el-watermark>
        <el-descriptions :column="2">
          <slot :rows="detailsData" />
        </el-descriptions>
        <el-descriptions :column="2">
          <el-descriptions-item :label="$t(`table.status`)">{{
            detailsData.createdBy
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t(`table.version`)">{{
            detailsData.reversion
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t(`table.createdBy`)">{{
            detailsData.createdBy
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t(`table.createdTime`)">{{
            detailsData.createdTime
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t(`table.updatedBy`)">{{
            detailsData.updatedBy
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t(`table.updatedTime`)">{{
            detailsData.updatedTime
          }}</el-descriptions-item>
        </el-descriptions>
      </el-watermark>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">{{ $t(`button.cancel`) }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.content {
  padding: 10px 40px;
}
</style>
